<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>门店编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<!--高德地图JSAPI-->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=d7175f7d8ac6be409ba22e0a2c3adc3a&plugin=AMap.Autocomplete"></script>
	<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
	<style type="text/css">
		.layui-form{
			padding: 10px ;
		}
		.layui-form-item {
			width: 100%;
			float: left;
			margin-right: 0;
		}

		@media (max-width: 1240px) {
			.layui-form-item .layui-inline {
				width: 100%;
				float: none;
			}
		}
		.layui-form-pane .left{
			width:400px;
			float:left;
		}
		.layui-form-pane .right{
			width:500px;
			float:left;
		}
		#container {width:500px; height: 250px; }
		#myPageTop{
			margin:20px 0;
			text-indent:1em;
		}
		#tipinput,#lnglat{
			width: 170px;
			height: 30px;
			margin: 5px 40px 0 0px;
		}
		#submit{
			margin: 0 0 0 13px;
		}
		.layui-code, .layui-upload-list{
			margin: 0 80px 0 0;
			width: 90px;
			height:90px;
			float: right;
		}
		.layui-code, .layui-upload-list img{
			width:100%;
			height:100%;
		}
	</style>
</head>
<body class="childrenBody">
	<form class="layui-form layui-form-pane">
		<div class="left">
			<div class="layui-form-item">
				<h3>基本信息</h3>
			</div>
			<div class="layui-form-item">
					<label class="layui-form-label">所属区域</label>
					<div class="layui-input-block">
					  <select name="regionId" lay-verify="required" id="regionId">

					  </select>
					</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">门店名称</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="required" name="name" placeholder="请输入门店名称">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">门店地址</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input"  name="address" lay-verify="required" placeholder="请输入门店地址">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系人</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="required" name="contacts" placeholder="请输入联系人">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="required||phone" name="phone" placeholder="请输入手机号码">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">固定电话</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="required" name="landline" placeholder="请输入固定电话">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="required" name="username" placeholder="请输入账号名" readonly="readonly">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					 <input type="checkbox" title="重置" name="resetPass">

				 </div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">公众号账号</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="" name="officialAccount" placeholder="请输入公众号账号">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">公众号名称</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="" name="officialName" placeholder="请输入公众号名称">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">APPID</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="" name="appid" placeholder="请输入APPID">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">APPSecret</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" lay-verify="" name="appSecret" placeholder="请输入APPSecret">
				</div>
			</div>
			<!--<div class="layui-form-item">
				<label class="layui-form-label">PICC授权门店</label>
				<div class="layui-input-block">
					 <select name="piccMid" id="piccMid" lay-search>
						<option value="0">&#45;&#45;请直接选择或通过检索获取授权门店&#45;&#45;</option>
					  </select>
				</div>
			</div>-->
			<input type="hidden" name="merchantImg">
			<div class="layui-form-item">
				<label class="layui-form-label">门店LOGO</label>

				<div class="layui-upload">
					<button type="button" class="layui-btn" id="test1">上传图片</button>
					<div class="layui-upload-list">
						<img class="layui-upload-img" id="demo1" width="150px" height="150px">
						<p id="demoText"></p>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="layui-form-item">
				<h3 style="margin-left:110px;">地图坐标</h3>
			</div>
			<div class="layui-form-item">
				<!--<label class="layui-form-label">选择经纬度</label>-->
				<div class="layui-input-block">
					<div id="container"></div>
					<div id="myPageTop">
						<table>
							<tr>
								<td>
									<label>按关键字搜索：</label>
								</td>
								<td class="column2">
									<label>左击获取经纬度：</label>
								</td>
							</tr>
							<tr>
								<td>
									<input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
								</td>
								<td class="column2">
									<input type="text" readonly="true" id="lnglat" name="lnglat">
								</td>
							</tr>
						</table>
					</div>
				</div>

			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="editMerchants">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
	</form>

<!--一般情况下，一个业务页面引入一个layui.js和业务js这两个两个js就够了-->
<!-- <script type="text/javascript" src="../../../lib/layui/layui.js"></script> -->
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<!-- <script type="text/javascript" src="editMenu.js"></script> -->
	<script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
	</script>
<script type="text/javascript">
function renderForm(){
	  layui.use('form', function(){
	   var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	   form.render();
	  });
}
var regionsList;
$.ajax({
    type : "GET",
    url: '/regions/getAll',
    dataType:'json',
 	  async:false,
    success: function(data){
    	var list=data.data;
    	regionsList=list;
    	var html='';
        for(var i=0;i<list.length;i++){	
            html += "<option value='"+list[i].id+"'>"+list[i].regionName+"</option>"
        }
        $("#regionId").append(html);
        renderForm();
    }
});

/*$.ajax({
    type : "GET",
    url: '/merchants/piccStores.json',
    dataType:'json',
 	  async:false,
    success: function(data){
    	var list=data.data;
    	var html='';
        for(var i=0;i<list.length;i++){	
            html += "<option value='"+list[i].id+"'>"+list[i].storeName+"</option>"
        }
        $("#piccMid").append(html);
    }
});*/
layui.config({
    base: '/js/admin/'
}).extend({
    ajaxExtention: 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
    $tool: 'tool'
}).use(['form', 'layer', 'jquery', 'ajaxExtention', '$tool','upload'], function () {
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        $ = layui.jquery,
        upload = layui.upload,
        $tool = layui.$tool;

    //上传图片
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#test1'
        ,url: '/merchants/upload/'
        ,before: function(obj){
            console.log(obj);
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        }
        ,done: function(res){
            //如果上传失败
            if(res.code==2000){
                //上传成功
                layer.msg('上传成功');
                $("input[name='merchantImg']").val(res.data);
            } else{
                return   layer.msg('上传失败');
            }

        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
    });


    initUserInfo();
    /**
     * 初始化用户信息
     * */
    function initUserInfo() {
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        var url = '/merchants/getById/'+id;
        $.ajax({
            url:url,
            method:"GET",
            success:function (data) {
                var datas = data.data;
                $("input[name='name']").val(datas.name);
                $("input[name='address']").val(datas.address);
                $("input[name='contacts']").val(datas.contacts);
                $("input[name='phone']").val(datas.phone);
                $("input[name='landline']").val(datas.landline);
                $("input[name='officialAccount']").val(datas.officialAccount);
                $("input[name='officialName']").val(datas.officialName);
                $("input[name='appid']").val(datas.appid);
                $("input[name='appSecret']").val(datas.appSecret);
                $("select option[value='"+datas.regionId+"']").attr("selected","selected");
                $("input[name='username']").val(datas.username);
                $("input[name='merchantImg']").val(datas.merchantImg);
                $('#demo1').attr('src', datas.merchantImg); //图片链接（base64）
             //   $("#piccMid option[value='"+datas.piccMid+"']").attr("selected","selected");
                if(datas.lng !=undefined || datas.lat != undefined){
                    $("#lnglat").val(datas.lng +","+datas.lat);
                }else{
                    $("#lnglat").val("");
                }

                form.render();//重新绘制表单，让修改生效
            }
        });
    }

    /**
     * 表单提交
     * */
     form.on("submit(editMerchants)", function (data) {
        var queryArgs = $tool.getQueryParam();//获取查询参数
        var id = queryArgs['id'];
        var name = data.field.name;
        var address =data.field.address;
        var regionId =data.field.regionId;
        var contacts =data.field.contacts;
        var phone =data.field.phone;
       // var piccMid=data.field.piccMid;
        var landline=data.field.landline;
        var merchantImg=data.field.merchantImg;
        var resetPass=data.field.resetPass;
         var officialAccount=data.field.officialAccount;
         var officialName=data.field.officialName;
         var appid=data.field.appid;
         var appSecret=data.field.appSecret;
         var lnglat=data.field.lnglat;
        //请求
        var url ='/merchants';
        var req = {
            id:id,
            name: name,
            address:address,
            regionId:regionId,
            contacts:contacts,
            phone:phone,
            resetPass:resetPass,
          //  piccMid:piccMid,
            landline:landline,
            merchantImg:merchantImg,
            officialAccount:officialAccount,
            officialName:officialName,
			appid:appid,
			appSecret:appSecret,
            lnglat:lnglat
        };
        $.ajax({
            url: url,
            contentType:"application/json;charset=UTF-8",
            data: JSON.stringify(req),
            method: "PUT",
            success: function (data) {
             		if(data.code==2000){
             			layer.msg("门店更新成功！", {time: 1000}, function () {
                            layer.closeAll("iframe");
                            parent.location.reload();
                        });
             		}
            }
           
        });

        return false;
    }) 

});

</script>
</body>
</html>

